<template>
	<view class="real-name-auth full box relative bg-primary flex-col p-safe">
		<view class="w-wrap">
			<view class="w-inner inner-wrap">
				<view class="form-box">
					<u-form label-width="180rpx" :model="formData" :rules="formRules" ref="formRef">
						<u-form-item label="联系人姓名:" prop="name">
							<u-input v-model="formData.name" placeholder="请输入联系人姓名" />
						</u-form-item>
						<u-form-item label="联系人手机:" prop="mobile">
							<u-input v-model="formData.mobile" placeholder="请输入联系人手机" />
						</u-form-item>
						<u-form-item label="电子邮箱:" prop="email">
							<u-input v-model="formData.email" placeholder="请输入电子邮箱" />
						</u-form-item>
						<u-form-item label="身份证号码:" prop="idcard">
							<u-input v-model="formData.idcard" placeholder="请输入身份证号码" />
						</u-form-item>
					</u-form>
				</view>
				<view class="idcard-box">
					<view class="id-title">
						<text>上传身份证</text>
					</view>
					<view class="sub-title">
						<text>请上传您的身份证照片正反面</text>
						<text>{{ imageCount }}/2张</text>
					</view>
					<view class="image-box">
						<view class="img-item" @click="handleUploadImage()">
							<image v-if="formData.touxiang_image" :src="formData.touxiang_image" mode="aspectFill">
							</image>
							<image v-else
								src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/2025080323255131f682190.png"
								mode="aspectFill"></image>
						</view>
						<view class="img-item" @click="handleUploadImage(true)">
							<image v-if="formData.guohui_image" :src="formData.guohui_image" mode="aspectFill">
							</image>
							<image v-else
								src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/20250803232617b2f463245.png"
								mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!-- <view class="card-box">
					<view class="card-label">
						<text>是否需要开票:</text>
					</view>
					<view class="card-inner">
						<view class="checkbox-item">
							<view class="checkbox-com active">
								<u-icon name="checkmark" color="#fff" size="24rpx" />
							</view>
							<text class="checkbox-title">需要</text>
						</view>
						<view class="checkbox-item">
							<view class="checkbox-com">
								<u-icon name="checkmark" color="#fff" size="24rpx" />
							</view>
							<text class="checkbox-title">不需要</text>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="footer-wrap">
			<u-button type="primary" shape="circle" @click="handleConfirm">立即认证</u-button>
		</view>
	</view>
</template>

<script>
	import { toast, request, showLoading, uploadFile } from '@/utils/tool'

	export default {
		data() {
			return {
				formData: {
					name: "",
					mobile: "",
					email: "",
					idcard: "",
					touxiang_image: "",
					guohui_image: ""
				},
			}
		},
		computed: {
			imageCount() {
				let count = 0
				const { touxiang_image, guohui_image } = this.formData
				if (touxiang_image) count += 1
				if (guohui_image) count += 1
				return count
			},
			formRules() {
				return {
					name: [{
						required: true,
						message: '请输入加盟人姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					mobile: [{
						required: true,
						message: '请输入加盟人电话',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					email: [{
						required: true,
						message: '请输入电子邮箱',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					idcard: [{
						required: true,
						message: '请输入身份证号码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				}
			}
		},
		onReady() {
			this.$refs.formRef.setRules(this.formRules);
		},
		methods: {
			handleUploadImage(isFan = false) {
				uni.chooseImage({
					count: 1,
					success: async ev => {
						const { tempFilePaths } = ev
						const [file] = tempFilePaths
						const [error, resp] = await uploadFile(file, true)
						if (error) return toast({ title: "上传图片失败" })
						const { uri } = resp
						if (isFan) return this.formData.guohui_image = uri
						this.formData.touxiang_image = uri
						console.log(resp, 'resp');
					}
				})
			},
			handleConfirm() {
				this.$refs.formRef.validate(async (valid) => {
					if (!valid) return
					const { touxiang_image, guohui_image } = this.formData
					if (!touxiang_image) return toast({ title: "请上传身份证正面" })
					if (!guohui_image) return toast({ title: "请上传身份证反面" })
					const payload = { ...this.formData }
					const hide = showLoading("正在提交")
					const resp = await request({
						url: "/shiming/add",
						data: payload
					}).finally(hide)
					console.log(resp, 'resp');
					if (resp.code !== 1) {
						return toast({ title: resp.msg || "提交失败" })
					}
					toast({ title: "提交成功", icon: "success" })
					uni.navigateBack()
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.real-name-auth {
		.footer-wrap {
			padding: 0 32rpx;
		}

		.inner-wrap {
			padding: 32rpx 30rpx 0;
		}

		.card-box {
			margin-top: 24rpx;
			padding: 26rpx 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.card-inner {
				display: flex;
				align-items: center;

				.checkbox-item {
					display: flex;
					align-items: center;
					margin-left: 32rpx;

					.checkbox-com {
						width: 42rpx;
						height: 42rpx;
						border: 2rpx solid #DCDCDC;
						box-sizing: border-box;
						background-color: #fff;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						&.active {
							background-color: #3361F0;
							border-color: #3361F0;
						}
					}

					.checkbox-title {
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.9);
						line-height: 44rpx;
						margin-left: 8rpx;
					}
				}
			}

			.card-label {
				font-size: 28rpx;
				color: #000000;
				line-height: 44rpx;
			}
		}

		.idcard-box {
			margin-top: 26rpx;
			box-sizing: border-box;
			padding: 24rpx 32rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.image-box {
				display: flex;
				align-items: center;
				margin-top: 32rpx;

				.img-item {
					width: 232rpx;
					height: 142rpx;
					margin-right: 32rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.id-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				line-height: 44rpx;
			}

			.sub-title {
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.6);
				line-height: 40rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.form-box {
			padding: 16rpx 22rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-sizing: border-box;
			position: relative;

			.get-code-btn {
				width: 138rpx;
				height: 46rpx;
				line-height: 46rpx;
				text-align: center;
				font-size: 20rpx;
				color: #FFFFFF;
				background: linear-gradient(90deg, #85AAE6 0%, #0967FE 100%);
				border-radius: 23rpx 23rpx 23rpx 23rpx;
			}

			.confirm-btn {
				margin: 44rpx auto 0;
				width: 437rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 36rpx;
				color: #FFFFFF;
				background: linear-gradient(90deg, #7FA7E7 0%, #0A67FD 100%);
				border-radius: 38rpx 38rpx 38rpx 38rpx;
			}

			.form-text {
				font-size: 28rpx;
				color: #464655;
				line-height: 40rpx;
			}
		}
	}
</style>